<template>
  <div class="home-container">
    <div class="head-container">
      <a-button type="primary" @click="loadRuleFile">加载规则文件</a-button>
      <a-button type="primary" @click="loadCodeFile">加载代码文件</a-button>
      <a-button type="primary" @click="formatGemmer">格式化语法</a-button>
      <div>
        <span class="head-text">请选择规则：</span>
        <a-select :style="{width:'300px'}" size="small" placeholder="请选择规则" v-model="userSelectRule">
          <a-option v-for="item in allRuleList" @click="selectRule(item)">{{item}}</a-option>
        </a-select>
      </div>
      <div class="head-text">当前版本：0.0.2</div>
      <div class="head-text">Pest版本：2.8.0</div>
    </div>
    <SplitView
        :rules="parentRules"
        :code="parentCode"
        :result="parentResult"
        @update:rules="updateRule"
        @update:code="updateCode"
        @update:result="parentResult = $event">
    </SplitView>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SplitView from '@/component/SplitView.vue'
import {openFileDialog, getFileContent, getAllRules, runGrammar, formatGrammar} from "@/utils/index.js"

const allRuleList = ref([]);
const parentRules = ref('');
const parentCode = ref('');
const parentResult = ref('');

// 加载规则文件
const loadRuleFile = async function () {
  try {
    const filePath = await openFileDialog();
    if (!filePath) {
      return;
    }
    await getFileContent(filePath).then(res => {
      res.data.then(res2 => {
        updateRule(res2);
      }).catch( e => {
        parentResult.value = e;
      })
    });
  } catch (error) {
    console.error('加载规则文件失败:', error);
  }
}

// 加载代码文件
const loadCodeFile = async function () {
  try {
    const filePath = await openFileDialog();
    if (!filePath) {
      return;
    }
    await getFileContent(filePath).then(res => {
      res.data.then(res2 => {
        updateCode(res2);
      }).catch( e => {
        parentResult.value = e;
      })
    });
  } catch (error) {
    console.error('加载代码文件失败:', error);
  }
}

// 格式化语法
const formatGemmer = async function () {
  if (parentRules.value == null || parentRules.value === '') {
    parentResult.value = "";
    return;
  }
  await formatGrammar(parentRules.value).then(res => {
    res.data.then(res1 => {
      parentRules.value = res1;
    }).catch( e => {
      parentResult.value = e;
    });
  })
}

// 获取所有规则
const updateRule = async function(event) {
  if (event == null || event === '') {
    parentResult.value = "";
    return;
  }
  parentRules.value = event;
  await getAllRules(parentRules.value).then(res => {
    res.data.then( res1 => {
      console.log(res1);
      allRuleList.value = [...res1];
      selectRule(res1[0]);
    }).catch( e => {
      parentResult.value = e;
    })
  });
}

// 更新代码文件
const updateCode = async function(event) {
  parentCode.value = event
  if (userSelectRule.value != null) {
    selectRule(userSelectRule.value);
  }
}

// 选择规则
const userSelectRule = ref("");
const selectRule = async function(ruleName) {
  userSelectRule.value = ruleName;
  // 进行语法检测
  if (! (parentRules.value && userSelectRule.value && parentCode.value)) {
    return;
  }
  await runGrammar(
      parentRules.value,
      userSelectRule.value,
      parentCode.value
  ).then(res => {
    res.data.then(val => {
      console.log("运行结果：", val);
      parentResult.value = val;
    }).catch( e => {
      parentResult.value = e;
    })
  });
}

</script>

<style>

.head-container {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 10px;
  background-color: #1e1e1e;
}

.head-text {
  font-size: 14px;
  color: #cacaca;
  font-weight: 500;
}
</style>